<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>安全举报</title>
    <link rel="stylesheet" href="/Public/projects/tip/style/weui.min.css"/>
    <link rel="stylesheet" href="/Public/projects/tip/style/example.css"/>
</head>
<body ontouchstart>
    <div class="page__hd">
        <h1 class="page__title">你查隐患，我来奖励</h1>
        <p class="page__desc">安全事关你我，共筑平安交投，欢迎您使用手中的镜头和掌握的实情，寻找和举报身边的安全隐患和安全生产违法行为。</p>
    </div>
    <div class="weui-cells__title" style="margin-top: 20px;">举报内容（<span style="color: red">*必填</span>）</div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea" placeholder="请输入举报内容" rows="3" id="content"></textarea>
            </div>
        </div>
    </div>
    <div class="weui-cells__title">单位（<span style="color: red">*必填</span>）</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="请输入单位" id="company"/>
            </div>
        </div>
    </div>
    <div class="weui-cells__title">姓名（<span style="color: red">*必填</span>）</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="请输入姓名"  id="name"/>
            </div>
        </div>
    </div>
    <div class="weui-cells__title">电话（<span style="color: red">*必填</span>）</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="请输入电话" id="telephone"/>
            </div>
        </div>
    </div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title">图片上传（<span style="color: red">*单张图片不要超过2M</span>）</p>
                    </div>
                    <div class="weui-uploader__bd" id="img_div">
                        <div class="weui-uploader__input-box" >
                            <img src="" id="img" class="weui-uploader__file" alt="">
                        </div>
                    </div>
                    <input id="uploaderInput" type="file" accept="image/*" style="display: none" multiple/>
                </div>
            </div>
        </div>
    </div>
    <div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">提交</a>
    </div>
    <div class="js_dialog" id="iosDialog2" style="display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd" id="dialog_content">提交成功</div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" id="dialog_check">知道了</a>
            </div>
        </div>
    </div>
    <!--BEGIN toast-->
    <div id="toast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <p class="weui-toast__content" id="toast_content">已完成</p>
        </div>
    </div>
    <!--end toast-->
</body>
<script src="/Public/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>

    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '{$appId}', // 必填，公众号的唯一标识
        timestamp: "{$timestamp}", // 必填，生成签名的时间戳
        nonceStr: '{$nonceStr}', // 必填，生成签名的随机串
        signature: '{$wxsha1}',// 必填，签名，见附录1
        jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline', 'chooseImage', 'getLocalImgData'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.error(function(res){
        console.log(res);
    });
    wx.ready( function( e ){
        wx.onMenuShareAppMessage({
            title: "安全有奖举报",
            desc: '你查隐患，我来奖励',
            link: "http://esm.zbxinmeiti.com/Wap/Applications/tip",
            imgUrl: "http://esm.zbxinmeiti.com/Public/projects/tip/20180428153442.jpg",
            success: function () {
            }
        });
        wx.onMenuShareTimeline({
            title: "安全有奖举报",
            link: "http://esm.zbxinmeiti.com/Wap/Applications/tip",
            imgUrl: "http://esm.zbxinmeiti.com/Public/projects/tip/20180428153442.jpg",
            success: function () {
            }
        });
    });

    var pic = '';
    $("#img_div").click(function () {
        if(window.__wxjs_is_wkwebview){
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original','compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    for(var i=0; i<localIds.length;i++){
                        wx.getLocalImgData({
                            localId: localIds[i],
                            success:function(res){
                                var localData = res.localData;
                                $("#img").attr("src", localData);
                                pic = localData;
                            },
                            fail: function(res){
                                alert(res);
                            }
                        });
                    }
                }
            })
        }else{
            $("#uploaderInput").click(); //隐藏了input:file样式后，点击头像就可以本地上传
            $("#uploaderInput").on("change",function(){
                var file = this.files[0];
                if(!/image\/\w+/.test(file.type)){
                    alert("请确保文件为图像类型");
                    return false;
                }
                var reader=new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function() {
                    $("#img").attr("src", this.result);
                    pic = this.result;
                };
            });
        }
    });
    $("#dialog_check").click(function(){
        $("#iosDialog2").css("display", "none");
    });
    $("#showTooltips").click(function(){
        var content = $("#content").val();
        var name = $("#name").val();
        var company = $("#company").val();
        var telephone = $("#telephone").val();
        if(content === ''){
            $("#dialog_content").html("请输入举报内容");
            $("#iosDialog2").css("display", "block");
            return;
        }
        if(company === ''){
            $("#dialog_content").html("请输入单位");
            $("#iosDialog2").css("display", "block");
            return;
        }
        if(name === ''){
            $("#dialog_content").html("请输入姓名");
            $("#iosDialog2").css("display", "block");
            return;
        }
        if(telephone === ''){
            $("#dialog_content").html("请输入电话");
            $("#iosDialog2").css("display", "block");
            return;
        }
        $.ajax({
            type:'post',
            url:'/Wap/Applications/tipAjax',
            dataType:'json',
            async : true,
            data:{
                content: content,
                name: name,
                company: company,
                telephone: telephone,
                pic: pic
            },
            success:function(res){
                var $toast = $('#toast');
                $("#toast_content").html(res.msg);
                $toast.fadeIn(100);
                setTimeout(function () {
                    $toast.fadeOut(100);
                    window.location.reload();
                }, 2000);
            }
        });
    });
</script>
<script src="/Public/js/common/baidutongji.js"></script>
</html>
